---
title: 透過自動化命令列安裝 Astro
description: 如何透過 create-astro 命令列工具使用 NPM、PNPM 或 Yarn 來安裝 Astro
i18nReady: true
---
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'


準備好安裝 Astro 了嗎？跟隨我們的自動化或手動設定指南來開始吧。

:::note[偏好手動安裝 Astro？]
改為閱讀我們的[手動安裝指南](/zh-tw/install/manual/)。
:::

#### 事前準備

- **Node.js** - `v18.14.1` 或更高版本。
- **文字編輯器** - 我們推薦使用 [VS Code](https://code.visualstudio.com/) 搭配我們的[官方 Astro 延伸模組](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode).
- **終端機** - Astro 可透過命令列（CLI）來使用。


#### 安裝

`create astro` 是從頭打造新 Astro 專案的最快方式。它將帶你完成建立新 Astro 專案的每一步。它允許你從幾個不同的官方入門模板中選擇，或是你可以[透過 `--template` 參數使用 GitHub 上的任何現有專案](#入門模板)。

:::tip[線上預覽]
想在瀏覽器中嘗試 Astro 嗎？造訪 [astro.new](https://astro.new/) 來瀏覽我們的入門模板，不需離開瀏覽器也能啟動一個新的 Astro 專案。
:::


## 1. 執行安裝嚮導

在你的終端機中執行以下指令來啟動我們方便的安裝嚮導：

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  # 使用 npm 建立新專案
  npm create astro@latest
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  # 使用 pnpm 建立新專案
  pnpm create astro@latest
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  # 使用 yarn 建立新專案
  yarn create astro
  ```
  </Fragment>
</PackageManagerTabs>

你可以在你裝置的任何地方執行 `create astro`，事前並不需要為你的專案額外建立新的空目錄。如果執行前沒有空的目錄來存放你的專案，嚮導會自動幫你建立一個。

如果一切順利，你應該會在一些建議的步驟後看到「Liftoff confirmed. Explore your project!」。`cd` 進你的新專案目錄來開始使用 Astro。

如果你在執行命令列嚮導時略過了 `npm install` 步驟，繼續之前請先確認你已經安裝了依賴項。


## 2. 啟動 Astro ✨

Astro 內建的開發伺服器帶有開發專案時所需的一切功能。`astro dev` 指令將啟動本地開發伺服器，以便讓你看到你的新網站第一次運作。

每個入門模板都附帶一個事先配置好的腳本，可為你執行 `astro dev` 指令。使用你喜好的套件管理器執行此指令來啟動 Astro 開發伺服器。

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  npm run dev
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  pnpm run dev
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  yarn run dev
  ```
  </Fragment>
</PackageManagerTabs>

若一切順利，Astro 現在應該會在 [http://localhost:4321/](http://localhost:4321/) 上執行你的專案！

Astro 會監聽 `src/` 目錄下的即時檔案變動，因此在開發過程中更動時你不需要重啟伺服器。

在瀏覽器檢視開發中的網站時，你可以使用 [Astro 開發工具列](/zh-tw/guides/dev-toolbar/)，它能協助你檢視[島嶼](/zh-tw/concepts/islands/)、檢查無障礙設計等等。

如果你無法在瀏覽器開啟你的專案，回到你執行 `dev` 指令的終端機查看是否發生了錯誤，或是你專案運作的 URL 運作與上方的連結不同。


## 入門模板

你也可以透過向 `create astro` 指令傳遞 `--template` 參數來從[官方範例](https://github.com/withastro/astro/tree/main/examples)或 GitHub 儲存庫的 `main` 分支來開始一個新的 Astro 專案。

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  # 使用官方範例建立一個新專案
  npm create astro@latest -- --template <example-name>

  # 基於 GitHub 儲存庫的主分支建立一個新專案
  npm create astro@latest -- --template <github-username>/<github-repo>
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  # 使用官方範例建立一個新專案
  pnpm create astro@latest --template <example-name>
  
  # 基於 GitHub 儲存庫的主分支建立一個新專案
  pnpm create astro@latest --template <github-username>/<github-repo>
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  # 使用官方範例建立一個新專案
  yarn create astro --template <example-name>
  
  # 基於 GitHub 儲存庫的主分支建立一個新專案
  yarn create astro --template <github-username>/<github-repo>
  ```
  </Fragment>
</PackageManagerTabs>

預設情況下，這個指令會使用範例儲存庫的 `main` 分支。若要使用其他分支，請透過 `--template` 參數一併傳遞分支名稱：`<github-username>/<github-repo>#<branch>`。

你可以到[佈景主題與入門專案展示中心](https://astro.build/themes/)瀏覽部落格、作品集、文件、登陸頁面等等！或者，也可以[在 GitHub 搜尋](https://github.com/search?o=desc&q=astro+starter&s=stars&type=Repositories)更多入門專案。

## 接下來

成功！你現在已經準備好開始用 Astro 進行構建了！🥳

以下是我們建議接著探索的主題。你可以按照任意順序閱讀。你甚至可以暫時離開我們的文檔並把玩你的新 Astro 專案代碼庫，當你遇到任何困難或問題時再回到這裡。

import { CardGrid, LinkCard } from '@astrojs/starlight/components';

<CardGrid>
  <LinkCard
    title="了解你的代碼庫"
    description="在專案結構指南中進一步了解 Astro 的檔案結構。"
    href="/zh-tw/basics/project-structure/"
  />
  <LinkCard
    title="新增框架"
    description="在整合指南中學習如何讓 Astro 支援 React、Svelte、Tailwind 等框架。"
    href="/zh-tw/guides/integrations-guide/"
  />
  <LinkCard
    title="部署網站"
    description="在部署指南中學習如何建立並部署 Astro 專案到網路上。"
    href="/zh-tw/guides/deploy/"
  />
</CardGrid>
